import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

/**
 * Pinia Store示例 - 01.认识pinia
 *
 * 这个文件展示了Pinia的基本用法，包含两个Store：
 * 1. 计数器Store (useCounterStore)
 * 2. 用户Store (useUserStore)
 */

// 计数器Store
export const useCounterStore = defineStore('counter', () => {
    // 状态 (State) - 相当于组件中的data
    const count = ref(0)

    // 计算属性 (Getters) - 相当于组件中的computed
    const doubleCount = computed(() => count.value * 2)

    // 动作 (Actions) - 相当于组件中的methods
    function increment() {
        count.value++
    }

    function decrement() {
        count.value--
    }

    function reset() {
        count.value = 0
    }

    // 返回需要暴露的状态和方法
    return {
        count,
        doubleCount,
        increment,
        decrement,
        reset
    }
})

// 用户Store
export const useUserStore = defineStore('user', () => {
    // 状态 (State)
    const username = ref('')
    const isLoggedIn = ref(false)
    const lastLoginTime = ref(null)

    // 计算属性 (Getters)
    const displayName = computed(() => {
        return username.value ? username.value : '未登录用户'
    })

    // 动作 (Actions)
    function setUsername(newUsername) {
        username.value = newUsername
        isLoggedIn.value = true
        lastLoginTime.value = new Date().toLocaleString()
    }

    function logout() {
        username.value = ''
        isLoggedIn.value = false
    }

    // 返回需要暴露的状态和方法
    return {
        username,
        isLoggedIn,
        lastLoginTime,
        displayName,
        setUsername,
        logout
    }
})